const BottomPanelConfig = {
	OVERLAY: 'bottom-panel-overlay',
	CONTAINER: 'bottom-panel',
	HEADER: 'panel-header',
	TITLE: 'panel-title',
	CLOSE: 'panel-close-btn',
	FOOTER: 'panel-footer',
	CONTENT: 'panel-content'
}

class BottomPanel {
	constructor(options = {}) {
		// 默认配置
		const defaultOptions = {
			title: '',
			content: '',
			footer: '',
			triggerSelector: '.trigger-btn',
			onOpen: () => {},
			onClose: () => {}
		};
		this.options = {
			...defaultOptions,
			...options
		};
		// 创建DOM结构
		this.initDOM();
		// 初始化事件
		this.initEvents();
	}

	initDOM() {
		// 创建遮罩层
		this.overlay = document.createElement('div');
		this.overlay.className = BottomPanelConfig.OVERLAY;

		// 创建面板容器
		this.panel = document.createElement('div');
		this.panel.className = BottomPanelConfig.CONTAINER;

		// 创建标题栏
		const header = document.createElement('div');
		header.className = BottomPanelConfig.HEADER;

		this.titleElement = document.createElement('h3');
		this.titleElement.className = BottomPanelConfig.TITLE;
		this.titleElement.textContent = this.options.title;

		this.closeBtn = document.createElement('button');
		this.closeBtn.className = BottomPanelConfig.CLOSE;
		this.closeBtn.innerHTML = '&times;';

		header.appendChild(this.titleElement);
		header.appendChild(this.closeBtn);

		// 创建内容区域
		this.contentElement = document.createElement('div');
		this.contentElement.className = BottomPanelConfig.CONTENT;
		this.contentElement.innerHTML = this.options.content;

		// 创建FOOTER区域
		this.footerElement = document.createElement('div');
		this.footerElement.className = BottomPanelConfig.FOOTER;
		this.footerElement.innerHTML = this.options.footer;

		// 组装面板
		this.panel.appendChild(header);
		this.panel.appendChild(this.contentElement);
		this.panel.appendChild(this.footerElement);

		// 添加到body
		document.body.appendChild(this.overlay);
		document.body.appendChild(this.panel);

		// 添加样式
		this.addStyles();
	}

	addStyles() {
		const style = document.createElement('style');
		style.textContent = `
				  .${BottomPanelConfig.OVERLAY} {
					position: fixed;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: rgba(0,0,0,0.5);
					opacity: 0;
					pointer-events: none;
					transition: opacity 0.3s ease;
					z-index: 998;
				  }
				  
				  .${BottomPanelConfig.OVERLAY}.active {
					opacity: 1;
					pointer-events: auto;
				  }
				  
				  .${BottomPanelConfig.CONTAINER} {
					position: fixed;
					bottom: 0;
					left: 0;
					right: 0;
					background: white;
					border-radius: 10px 10px 0 0;
					/* 水波纹动画定义 box-shadow: 0 -4px 20px rgba(0,0,0,0.15);*/
					transform: translateY(100%);
					transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
					z-index: 999;
					max-height: 90vh;
					width: 100%;
					display: flex;
					flex-direction: column;
				  }
				  
				  .${BottomPanelConfig.CONTAINER}.active {
					transform: translateY(0);
				  }
				  
				  .${BottomPanelConfig.HEADER} {
					padding: 16px;
					border-bottom: 1px solid #eee;
					display: flex;
					align-items: center;
					justify-content: space-between;
				  }
				  
				  .${BottomPanelConfig.TITLE} {
					font-size: 18px;
					font-weight: 600;
					color: #333;
				  }
				  
				  .${BottomPanelConfig.CLOSE} {
					background: none;
					border: none;
					font-size: 24px;
					color: #999;
					cursor: pointer;
					padding: 4px;
				  }
				  
				  .${BottomPanelConfig.CONTENT} {
					padding: 20px;
					overflow-y: auto;
					flex-grow: 1;
					font-size:	14px;
				  }
				  
				  .${BottomPanelConfig.FOOTER} {
					  background: none;
					  position: relative;
				  }
		`;
		document.head.appendChild(style);
	}

	initEvents() {
		// 触发按钮事件
		if (this.options.triggerSelector) {
			const triggers = document.querySelectorAll(this.options.triggerSelector);
			triggers.forEach(trigger => {
				trigger.addEventListener('click', () => this.open());
			});
		}
		// 关闭按钮事件
		this.closeBtn.addEventListener('click', () => this.close());
		// 遮罩层点击事件
		this.overlay.addEventListener('click', () => this.close());
	}

	open() {
		this.panel.classList.add('active');
		this.overlay.classList.add('active');
		document.body.style.overflow = 'hidden';
		this.options.onOpen();
	}

	close() {
		this.panel.classList.remove('active');
		this.overlay.classList.remove('active');
		document.body.style.overflow = '';
		this.options.onClose();
	}

	setTitle(title) {
		this.titleElement.textContent = title;
	}

	setContent(content) {
		this.contentElement.innerHTML = content;
	}

	destroy() {
		this.panel.remove();
		this.overlay.remove();
		const style = document.querySelector('style[data-bottom-panel]');
		if (style) style.remove();
	}
}
